<template>
  <div>
    <el-container>
      
 <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

      <el-image
      style="width: 200px; height: 60px"
      :src="require('../assets/pd.png')"
      :fit="fit"></el-image>
        <!-- 1 -->
        <el-menu router :default-active="this.$router.path" >
          <el-submenu
            v-for="(item, index) in menus"
            :key="index"
            :index="index"
          >
            <template slot="title">
              <i :class="item.icon"></i>{{ item.name }}
            </template>
            <el-menu-item-group>
              <div v-if="item.haschildren == true">
                <!-- 2 -->
                <!-- <el-menu-item v-for="itema in item.submenus" :key="itema.index" :index="itema.path">{{itema.name}}</el-menu-item> -->
                <el-submenu
                  v-for="(itema, indexb) in item.submenus"
                  :key="indexb + 1"
                  :index="indexb + 1"
                >
                  <template slot="title">
                    {{ itema.name }}
                  </template>
                  <!-- 1 -->
                  <el-menu-item-group>
                    <el-menu-item
                      v-for="itemb in itema.submenus"
                      :key="itemb.name"
                      :index="itemb.path"
                      >{{ itemb.name }}</el-menu-item
                    >
                  </el-menu-item-group>
                </el-submenu>
              </div>
              <div v-else>
                <!-- 2 -->
                <el-menu-item
                  v-for="(itemb, indexb) in item.submenus"
                  :key="indexb"
                  :index="itemb.path"
                  >{{ itemb.name }}</el-menu-item
                >
              </div>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <h3><i class="el-icon-setting" style="margin-right: 15px"></i></h3>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><p @click="gr">个人总心</p></el-dropdown-item>
              <el-dropdown-item><p @click="tc">退出</p></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              v-for="(item, index) in this.$store.state.top"
              :key="index"
              >{{ item }}</el-breadcrumb-item
            >
          </el-breadcrumb>
          <hr />
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.main {
  overflow: scroll;
  height: 700px;
}

.el-main {
  overflow: scroll;
  width: 100%;
  height: 780px;
  padding-bottom: 100px;
}

.el-container {
  padding: 0;
}



</style>

<script>
export default {
  data() {
    return {
      menus: this.$store.state.menus,
    };
  },
  methods: {
    clearlogin() {
      this.$router.push({ path: "/" });
    },
    tc() {
      this.$router.push({ path: "/" });
    },
    gr() {
      this.$router.push({ path: "/register" });
    },
  },
};
</script>